<template>
  <el-card>
    <div class="orderInfo-title">活动名称：{{ name }}</div>
    <!-- 检索框 -->
    <el-form class="orderInfo-form">
      <el-form-item label="创建时间">
        <el-row :gutter="4" type="flex" justify="start">
          <el-col :span="24">
            <el-date-picker
              v-model="listQuery.cycle"
              :picker-options="picker"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="|"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              style="width:300px"
            />
            <el-select v-model="listQuery.status" style="width:220px;">
              <el-option
                v-for="item in status"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
            <el-button type="primary" size="medium" @click="handleFilter">搜索</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column prop="sn" label="订单号" />
      <el-table-column prop="title" label="商品名称" />
      <el-table-column prop="createTimeTimeStr" label="创建时间" />
      <el-table-column prop="targetType" label="订单类型"/>
      <el-table-column prop="status" label="订单状态"/>
      <el-table-column prop="amount" label="订单金额"/>
    </el-table>
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
  </el-card>
</template>
<script>
import Pagination from '@/components/Pagination' // 分页组件
import { getActivityOrderListByParams } from '@/api/tinysale/addActivity'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      activityId: '',
      name: '',
      total: 0,
      currentpage: 1,
      pagesize: 10,
      listQuery: {
        cycle: '',
        status: ''
      },
      status: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '已创建',
          value: 'created'
        },
        {
          label: '已支付',
          value: 'paid'
        },
        {
          label: '请求退款',
          value: 'refunding'
        },
        {
          label: '已退款',
          value: 'refunded'
        },
        {
          label: '已取消',
          value: 'cancelled'
        }

      ],
      picker: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      tableData: [],
      filterData: []
    }
  },
  created() {
    this.name = this.$route.params.name;
    this.activityId = this.$route.params.id;
    this.getData()
  },
  methods: {
    getData() {
      getActivityOrderListByParams(this.activityId).then(res => {
        this.tableData = res.data.items;
        this.filterData = res.data.items;
        this.tableData.map(item => {
          if (item.status === 'paid') item.status = '已支付';
          if (item.status === 'created') item.status = '待支付';
          if (item.targetType === 'course') item.targetType = '课程';
          if (item.targetType === 'classroom') item.targetType = '课程包';
          if (item.targetType === 'groupPurchase') item.targetType = '多人拼团';
          if (item.targetType === 'cutPrice') item.targetType = '帮砍价';
          if (item.targetType === 'quickSell') item.targetType = '秒杀';
        });
        this.total = this.tableData.length
      })
    },
    // 搜索按钮
    handleFilter() {
      this.tableData = this.filterData.filter(item => {
        if (this.listQuery.cycle && (new Date(item.createTime) < this.listQuery.cycle[0] || new Date(item.createTime) > this.listQuery.cycle[1])) return false;
        if (this.listQuery.status && item.status !== this.listQuery.status) return false;
        return true
      });
      this.total = this.tableData.length
    },
    handleSizeChange(val) {
      this.currentpage = 1;
      this.pagesize = val.value;
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleCurrentChange(val) {
      this.currentpage = val.value;
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.orderInfo-form {
  margin-top: 20px;
}
</style>

